<template>
	<u-popup :show="visible" round="16rpx" mode="bottom" @close="hide">
		<view class="create-chat-room">
			<view class="create-chat-room__head">
				<text class="create-chat-room__head-title">{{!isMultiple?'点击箭头创建单聊':'勾选好友进入群聊'}}</text>

				<u-button v-if="isMultiple" border="none" size="small" throttleTime="500" color="#276AEE"
					:customStyle="{width:'120rpx',margin:'0'}" @click="confirmHandle">确认</u-button>

				<view class="create-chat-room__head-close bg-hover" @tap="hide">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard/static/img/tips／close@2x_1681978220794.png"></u-image>
				</view>
			</view>

			<scroll-view class="create-chat-room__content" scroll-y>
				<view>
					<view v-if="isMultiple" class="create-chat-room__roomname">
						<u-input v-model="roomName" placeholder="请输入聊天室标题" maxlength="20" border="bottom" clearable></u-input>
						<view v-if="errorMsg" class="create-chat-room__roomname-err">{{errorMsg}}</view>
					</view>

					<view class="create-chat-room__module" v-for="(item,index) in items" :key="index" @tap="itemToDetail(item)">
						<u-image width="100rpx" height="100rpx" :src="item.head||defaultAvatar"></u-image>

						<view class="create-chat-room__module-right">
							<view class="create-chat-room__module-right-line">
								<text class="create-chat-room__module-right-line__name">{{item.name||'[未填写姓名]'}}</text>
								<text class="create-chat-room__module-right-line__title">{{itemInfo.position||''}}</text>
							</view>
							<view class="create-chat-room__module-right-company">{{item.company||''}}</view>
						</view>

						<view class="create-chat-room__module-btns" @tap.stop.prevent>
							<!-- 群聊和密聊 -->
							<view v-if="isMultiple" class="icon" @tap.stop.prevent="checkHandle(item,index)">
								<view class="check-box" :class="{'active':item.checked}">
									<template v-if="item.checked">
										<u-icon name="checkbox-mark" color="#276AEE" size="26rpx"></u-icon>
									</template>
								</view>
							</view>

							<!-- 单聊 -->
							<view v-else class="icon" @tap.stop.prevent="leftArrowHandle(item,index)">
								<u-icon name="arrow-right" color="#4E5969" size="32rpx"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { defaultAvatar } from '@/config/staticConfig.js'

	export default {
		props: {
			// 是否是多选
			isMultiple: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				defaultAvatar,
				visible: false,
				roomName: '',
				errorMsg: '',

				items: [],
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
			}
		},
		computed: {
			...mapGetters(['openId']),
		},
		methods: {
			show() {
				this.visible = true
				this.errorMsg = ''
				this.roomName = ''

				this.loadMoreStatus = 'loading'
				this.getDBData()
			},
			hide() {
				this.visible = false
			},
			async itemToDetail(item) {
				uni.showLoading({ mask: true, title: '请稍后' })
				let res = await this.$api.queryCurrentCardByOpenId({ openId: item.friendOpenId })
				if (res.success) {
					uni.hideLoading()
					uni.navigateTo({
						url: `/pagesCard/friendMainPage/friendMainPage?cardId=${res.result.id}&openId=${res.result.openId}&unionId=${res.result.unionId}`
					})
				} else {
					uni.showToast({ title: '该好友尚未创建名片', icon: 'none' })
				}
			},
			checkHandle(item, index) {
				this.$set(item, 'checked', !item.checked)
			},
			confirmHandle() {
				this.errorMsg = ''
				if (!this.roomName) {
					this.errorMsg = '请输入群名称！'
					return
				}

				let tFilter = this.items.filter(item => item.checked)
				if (!tFilter.length) {
					this.errorMsg = '请选择人员！'
					return
				}

				this.$emit('confirm', {
					roomName: this.roomName,
					friendList: tFilter,
					friendOpenIdList: tFilter.map(item => item.friendOpenId)
				})
				this.hide()
			},
			leftArrowHandle(item) {
				this.$emit('confirm', {
					roomName: item.name,
					friendList: [item],
					friendOpenIdList: [item.friendOpenId],
				})
				this.hide()
			},
			async getDBData() {
				let params = {
					openId: this.openId,
					name: '',
				}
				let res = await this.$api.queryChatFriend(params)
				if (res.success) {
					this.items = res.result
						.filter(item => item.friendOpenId != this.openId)
						.map(item => {
							item.checked = false
							return item
						})
					console.log('好友列表：', this.items);
					this.loadMoreStatus = 'nomore'
				} else {
					this.loadMoreStatus = 'nomore'
				}
			},
			refresherrefresh() {
				this.loadMoreStatus = 'loading'
				this.items = []
				setTimeout(async () => {
					await this.getDBData()
				}, 500)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.create-chat-room {
		position: relative;
		height: 70vh;

		.create-chat-room__head {
			position: relative;
			height: 92rpx;
			padding: 0 32rpx;
			box-sizing: border-box;

			display: flex;
			justify-content: space-between;
			align-items: center;

			.create-chat-room__head-title {
				position: absolute;
				left: 50%;
				width: 600rpx;
				height: 100%;
				font-size: 32rpx;
				font-weight: 600;
				color: #1D2129;
				line-height: 44rpx;
				transform: translateX(-50%);

				display: flex;
				justify-content: center;
				align-items: center;
			}

			.create-chat-room__head-close {
				margin-left: auto;
			}
		}

		.create-chat-room__content {
			position: relative;
			height: calc(100% - 92rpx);
			padding-top: 30rpx;

			.create-chat-room__roomname {
				padding: 32rpx;
				background-color: #fff;
				box-sizing: border-box;

				.create-chat-room__roomname-err {
					padding-top: 6rpx;
					font-size: 24rpx;
					color: #F53F3F;
					line-height: 36px;
				}
			}

			.create-chat-room__module {
				margin: 32rpx;
				padding-bottom: 15rpx;
				border-bottom: 1rpx solid #eee;

				display: flex;
				align-items: center;

				.create-chat-room__module-right {
					margin-left: 24rpx;

					.create-chat-room__module-right-line {
						.create-chat-room__module-right-line__name {
							width: 91rpx;
							height: 29px;
							font-size: 30rpx;
							font-weight: 500;
							color: #000000;
							line-height: 36rpx;
						}

						.create-chat-room__module-right-line__title {
							padding-left: 22rpx;
							font-size: 18rpx;
							font-weight: 400;
							color: #666666;
							line-height: 36rpx;
						}
					}

					.create-chat-room__module-right-company {
						padding-top: 22rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						line-height: 36rpx;
					}
				}

				.create-chat-room__module-btns {
					height: 100%;
					margin-left: auto;
					padding-left: 24rpx;

					.icon {
						margin-right: -20rpx;
						padding: 20rpx;
					}

					.check-box {
						width: 32rpx;
						height: 32rpx;
						border: 2rpx solid #dadbde;
						border-radius: 4rpx;
						box-sizing: content-box;

						display: flex;
						justify-content: center;
						align-items: center;

						&.active {
							border: 2rpx solid #276AEE;
						}
					}
				}
			}
		}
	}
</style>